<template>
	<view>
		<view v-if="inline===1" class="view_sign">
			<view class="view first-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal ? '#37c662':ghostWhite}"></view>
			<view class="view second-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=0) ? '#37c662':ghostWhite}"></view>
			<view class="view third-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=10) ? '#37c662':ghostWhite}"></view>
			<view class="view fourth-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=20) ? '#37c662':ghostWhite}"></view>
		</view>
		
		<view v-else-if="inline===0" class="view_sign">
			<view class="offview first-view" style="backgroundColor:#fff"
				:style="{backgroundColor:netSignal ? '#898989': ghostWhite}"></view>
			<view class="offview second-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=0) ? '#898989':ghostWhite}"></view>
			<view class="offview third-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=10) ? '#898989':ghostWhite}"></view>
			<view class="offview fourth-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal&&((60-Math.abs(netSignal))>=20) ? '#898989':ghostWhite}"></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ghostWhite: ''
			}
		},
		name: 'Signal',
		props: {
			inline: {
				type: [String, Number],
				default: -1
			},
			netSignal: {
				type: [String, Number],
				default: -1
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		mounted() {
			this.ghostWhite = this.$store.state.themeConfig.ghostWhite
		}
	}
</script>

<style scoped>
	.view_sign {
		display: flex;
		align-items: flex-end;
		height: 32rpx;
	}

	.view {
		width: 10rpx;
		border: 1rpx solid #37c662;
		border-top-left-radius: 3rpx;
		border-top-right-radius: 3rpx;
	}

	.first-view {
		height: 10rpx;
	}

	.second-view {
		height: 17rpx;
		margin-left: 3rpx;
	}

	.third-view {
		height: 24rpx;
		margin-left: 3rpx;
	}

	.fourth-view {
		height: 32rpx;
		margin-left: 3rpx;
	}
	
	.offview {
		width: 10rpx;
		border: 1rpx solid #898989;
		border-top-left-radius: 3rpx;
		border-top-right-radius: 3rpx;
	}
</style>
